import React from 'react'
import {connect} from 'dva'
import {Table, Row, Col, Form, Input, Button, Popconfirm} from 'antd';
import RightBox from "../../../components/commons/RightBox";
import RightConstants from "../../../utils/RightConstants";
import Constants from '../../../utils/Constants';
import CustomsDetail from '../../../components/basedata/customsDetail';

const FormItem = Form.Item;


const customs = Form.create()(class Customs extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.dispatch({type: 'customs/getListForPage', payload: {page: Constants.DEFAULT_PAGE}});
  }

  onEdit = (id) => {

    this.props.dispatch({
      type: 'customs/getById',
      payload: {id}
    });
    this.customsDetail.handleOpen();
  };

  handleSearch = (flag) => {
    let newPage = this.props.customs.page;
    if (flag) newPage.page = 1;
    this.props.dispatch({
      type: 'customs/getListForPage',
      payload: {
        page: newPage
      }
    });
  };

  columns = [
    {title: '海关名称', dataIndex: 'companyname', key: 'companyname'},
    {title: '收款人', dataIndex: 'payeename', key: 'payeename'},
    {title: '收款人账号', dataIndex: 'payeeno', key: 'payeeno'},
    {title: '开户银行', dataIndex: 'bankName', key: 'bankName'},
    {title: '开户支行', dataIndex: 'bankbranch', key: 'bankbranch'},
    {title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},
    {
      title: '操作', width: '100px',
      render: (record) => {
        return (
          <span>


                  <RightBox resource={RightConstants.BASEDATA.BASE_PLACE_EDIT}>
                    <a href="#" onClick={this.onEdit.bind(this, record.id)}>编辑</a><span className="ant-divider"/>
                  </RightBox>

                   <RightBox resource={RightConstants.BASEDATA.BASE_PLACE_DELETE}>
                     <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                       this.props.dispatch({
                         type: 'customs/deleteCustoms',
                         payload: {
                           id: record.id,
                           onSuccess: () => this.handleSearch()
                         }
                       });
                     }} okText="是" cancelText="否">
                            <a href="#">删除</a>
                        </Popconfirm>
                  </RightBox>

                    </span>
        );
      }
    }];

  render() {

    let pagination = {
      showTotal: total => `共 ${total} 条数据`,
      pageSize: this.props.customs.page.size,
      current: this.props.customs.page.page,
      total: this.props.customs.page.totalRow,
      showSizeChanger: true,
      onShowSizeChange: (current, size) => {
        let newPage = this.props.customs.page;
        newPage.size = size;
        newPage.page = 1;
        this.props.dispatch({
          type: 'customs/getListForPage',
          payload: {
            page: newPage
          }
        });
      },
      onChange: (pageNumber, pageSize) => {
        let newPage = this.props.customs.page;
        newPage.page = pageNumber;
        this.props.dispatch({
          type: 'customs/getListForPage',
          payload: {
            page: newPage
          }
        });
      }
    }


    return (
      <div>
        <Row>
          <Col span={7}>
            <RightBox resource={RightConstants.BASEDATA.BASE_PLACE_ADD}>
              <Button type="primary" icon="plus" style={{marginBottom: 20}}
                      onClick={this.onEdit.bind(this, null)}>添加海关信息</Button>
            </RightBox>
          </Col>
        </Row>

        <Table rowKey="id" dataSource={this.props.customs.list} loading={this.props.loading} columns={this.columns}
               bordered={true} size={'middle'} scroll={{x: true}} pagination={pagination}/>
        <CustomsDetail wrappedComponentRef={(inst) => this.customsDetail = inst} refreshList={this.handleSearch}/>
      </div>
    );
  }
})

function mapStateToProps(state) {
  return {
    loading: state.loading.models.customs, customs: state.customs
  };
}

export default connect(mapStateToProps)(customs);
